<template>
	<view class="">
		<view class="city" :style="[navStyle]" v-if="location.city_name" 
			@click="go2page('/pages/store/selectorByCity')"
		>{{ location.city_name }}</view>
		<view class="swiper-content">
			<uni-swiper-dot :info="bannerList" :current="swiperDotCurrent" field="content" mode="default">
				<swiper class="swiper-box" @change="swiperChange">
					<swiper-item v-for="(item, index) in bannerList" :key="index" @click="jumpClick(item.url)">
						<view>
							<image class="swiper-image" :src="item.image" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<indexVideo :p-config="config"/>
		<!-- <view class="section_fun">
			<view class="fun_content">
				<view class="fc_upper">
					<view class="upper_item border-r" @click="jumpClick('/pages/product/index','tabBar')">
						<image src="../../static/icon/camera.png" mode=""></image>
						<view class="upper_text">
							我要拍照
						</view>
					</view>
					<view class="upper_item" @click="jumpClick('/pages/mall/index','tabBar')">
						<image src="../../static/icon/store.png" mode=""></image>
						<view class="upper_text">
							商城
						</view>
					</view>
				</view>
				<view class="fc_lower">
					<view class="lower_item border-r" @click="jumpClick('/pages/index/company')">
						<image src="../../static/icon/company.png" mode=""></image>
						<view class="item-content">
							<view class="text">公司介绍</view>
							<view class="text-sub">了解详情</view>
						</view>
					</view>
					<view class="lower_item border-r" @click="jumpClick('/pages/join/index')">
						<image src="../../static/icon/join.png" mode=""></image>
						<view class="item-content">
							<view class="text">加盟我们</view>
							<view class="text-sub">咨询加盟</view>
						</view>
					</view>
					<view class="lower_item" @click="jumpClick('/pages/kefu/kefu')">
						<image src="../../static/icon/customer.png" mode=""></image>
						<view class="item-content">
							<view class="text">客服服务</view>
							<view class="text-sub">专属服务</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<view class="article">
			<view class="article-title">
				<view class="">
					STORY
				</view>
				<view class="title-right" @click="jumpClick('/pages/external/index')">
					发现更多
					<uni-icons type="right" size="18" color="#8D8D8D"></uni-icons>
				</view>
			</view>
			<view class="article-item" v-for="(item,index) in externalList" :key="index" @click="externalClick(item)">
				<image :src="item.image" mode="widthFix"></image>
			</view>
		</view>

		<view class="explore">
			<!-- <view class="explore-title">
				<view class="explore-img">
					<image :src="config.mini_logo" mode=""></image>
				</view>
				<text>{{ config.mini_name }}</text>
			</view> -->
			<view class="explore-content">
				<view class="content-title">
					<view class="title-left">
						探索系列
					</view>
					<view class="title-right" @click="jumpClick('/pages/article/index')">
						探索更多
						<uni-icons type="right" size="18" color="#8D8D8D"></uni-icons>
					</view>
				</view>

				<view class="complist p-b-50">

					<view class="index_sale">
						<view class="free-WaterfallFlow">
							<view class="flex-wrap" v-for="(item,index) in articleList" :key="index"
								@click="jumpClick('/pages/article/detail?id='+item.id)">
								<view class="page-column">
									<image mode="widthFix" :src="item.image"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="coupon">
			<view class="coupon-img" @click="jumpClick('/pages/coupon/coupon')">
				<image src="../../static/icon/coupon_index.png" mode=""></image>
			</view>
		</view>

		<privacy ref="privacy" :show-privacy="showPrivacy" :privacy-contract-name="privacyContractName"
			@callback="privacyCallBack"></privacy>

		<uni-popup ref="popPopup">
			<view class="pop-content" :style="{'width': popWidth}" @click="jumpClick(pop.pop_path,'pop')">
				<view class="pop-img">
					<image :src="pop.pop_image" mode="widthFix"></image>
				</view>
			</view>

			<view class="pop-close">
				<view class="pop-c-c_icon" @click="popupClose">
					<uni-icons type="closeempty" color="#fff" size="28"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import indexVideo from "@/components/videos/indexVideo.vue"
	import {setDefaultCurStore} from "@/common/js/store.js"
	import { getLocation } from '../../common/js/location';
	export default {
		components:{indexVideo},
		data() {
			return {
				swiperDotCurrent: 0,
				bannerList: [],
				externalList: [],
				articleList: [],
				cityName: '',
				showPrivacy: false,
				privacyContractName: '',
				pop: {}
			}
		},
		computed: {
			...mapGetters({
				config: 'user/meetConfig',
				location: 'user/location'
			}),
			navStyle() {
				// 获取设备系统信息，单位px
				const systemInfo = wx.getSystemInfoSync()
				// 状态栏高度
				const statusBarHeight = systemInfo.statusBarHeight
				// iOS真机 胶囊区高度 40
				let navigationHeight = 50
				// 胶囊区域高度，安卓48
				if (systemInfo.system.indexOf('Android') !== -1) {
					navigationHeight = 58
				}
				return {
					'margin-top': statusBarHeight + navigationHeight + 'rpx'
				}
			},
			popWidth() {
				let system = uni.getSystemInfoSync()
				let width = system.screenWidth - 80
				return width + 'px'
			}
		},
		onLoad() {
			this.getData()
			this.privacy()
			// this.getLocation()
		},
		onShareAppMessage() {
			let url = '/pages/index/index'
			this.shareSend()
			return {
				title: this.config.share_title,
				imageUrl: this.config.share_image,
				path: url
			}
		},
		onShareTimeline(){
			this.shareSend()
			return {
				title: this.config.share_title,
				imageUrl: this.config.share_image,
			}
		},
		methods: {
			go2page(url){
				uni.navigateTo({
					url,
					success:(res)=>{
						let _event = res.eventChannel
						_event.on("changeStore",(data)=>{
							console.log("changeStore",data)
						})
					}
				})
			},
			swiperChange(e) {
				this.swiperDotCurrent = e.detail.current
			},

			privacy() {
				let _this = this

				uni.getPrivacySetting({
					complete: res => {
						if (res.errMsg == 'getPrivacySetting:ok') {
							if (!res.needAuthorization) {
								getLocation()
							} else {
								_this.privacyContractName = res.privacyContractName
								_this.showPrivacy = true
								_this.$refs.privacy.$refs.privacyPopup.open('center')
							}
						} else {
							getLocation()
						}
					}
				})
			},

			privacyCallBack(data) {
				if (data.status) getLocation()
			},

			getData() {
				let _this = this
				_this.$api.get('meet.index/index', {}).then(res => {
					_this.bannerList = res.data.banner_list
					_this.externalList = res.data.external_list
					_this.articleList = res.data.article_list
					_this.pop = res.data.pop
					if (_this.pop.pop_status == 1 && _this.pop.pop_image) {
						_this.$refs.popPopup.open('center')
					}
				}, fail => {})
			},

			popupClose() {
				this.$refs.popPopup.close()
			},

			jumpClick(url, type = '') {
				if (url) {
					if (type == 'tabBar') {
						uni.switchTab({
							url: url
						})
					} else {
						if (type == 'pop') {
							this.$refs.popPopup.close()
						}
						uni.navigateTo({
							url: url
						})
					}
				}
			},
			externalClick(item) {
				if (item.type == 1) {
					//跳转公众号文章
					uni.openOfficialAccountArticle({
						url: item.url,
						complete(res) {

						}
					})
				} else {
					//跳转视频号视频
					uni.openChannelsActivity({
						finderUserName: item.finderUserName,
						feedId: item.feedId,
						complete(res) {
							console.log(res)
						}
					})
				}
			},
			shareSend() {
				let _this = this
				_this.$api.get('meet.user/share', {}).then(res => {}, fail => {})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.pop-content {
		min-height: 50px;
		// background-color: #fff;
		border-radius: 32rpx;
		overflow: hidden;
		// width: 500rpx;

		.pop-img {
			// width: 500rpx;
			// min-height: 649rpx;

			image {
				width: 100%;
				// height: 100%;
			}
		}
	}

	.pop-close {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
	}

	.pop-c_icon {
		border: 6rpx solid #fff;
		border-radius: 50%;
		padding: 6rpx;
	}

	.city {
		position: absolute;
		top: 0;
		left: 34rpx;
		font-weight: 800;
		font-size: 30rpx;
		color: #000000;
		background: rgba(255, 255, 255, 0.5);
		padding: 5rpx 30rpx;
		z-index: 3;
		border-radius: 30rpx;
	}

	.swiper-content {
		height: 812rpx;
		width: 100%;
		top: 0;
		left: 0;
	}

	.swiper-box {
		height: 812rpx;
	}

	.swiper-image {
		width: 100%;
		height: 812rpx;
	}

	.uni-swiper__dots-box {
		bottom: 82rpx !important;
	}

	.section_fun {

		padding: 0 28rpx;

		.fun_content {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 32rpx;

			.fc_upper {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2px solid #DDDDDD;

				.upper_item {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 278rpx;

					image {
						width: 84rpx;
						height: 84rpx;
					}
				}

				.upper_text {
					color: #000000;
					font-weight: 800;
					font-size: 28rpx;
				}
			}

			.border-r {
				border-right: 2px solid #DDDDDD;
			}

			.fc_lower {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.lower_item {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 128rpx;

					image {
						width: 56rpx;
						height: 56rpx;
					}

					.item-content {
						margin-left: 14rpx;

						.text {
							color: #000000;
							font-size: 24rpx;
							font-weight: 800;
						}

						.text-sub {
							color: #8A8A8A;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}

	.article {
		overflow: hidden;
		padding: 0 28rpx;
		margin-top: 40rpx;

		.article-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 26rpx;

			.title-left {
				color: #010101;
				font-size: 32rpx;
				font-weight: 800;
			}

			.title-right {
				color: #010101;
				font-size: 28rpx;
				font-weight: 400;
				display: flex;
				align-items: center;
			}
		}

		.article-item {
			width: 100%;
			height: 202rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			// border: 2rpx solid #707070;
			margin-bottom: 16rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.explore {
		width: 100%;
		margin-top: 38rpx;

		.explore-title {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 54rpx;

			.explore-img {
				border-radius: 50%;
				width: 70rpx;
				height: 70rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}


			text {
				color: #010101;
				font-size: 40rpx;
				font-weight: 400;
				margin-left: 20rpx;
			}
		}

		.explore-content {
			// background: #FFFFFF;
			padding: 0 28rpx 100rpx 28rpx;

			.content-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;

				.title-left {
					color: #010101;
					font-size: 32rpx;
					font-weight: 800;
				}

				.title-right {
					color: #010101;
					font-size: 28rpx;
					font-weight: 400;
					display: flex;
					align-items: center;
				}
			}

			.explore-list {
				width: 100%;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;

				.explore-li {
					width: 50%;
					overflow: hidden;
					text-align: center;
					margin-bottom: 24rpx;

					image {
						width: 95%;
						border-radius: 14rpx 14rpx 14rpx 14rpx;
						height: 506rpx;
					}

				}
			}

			.complist {
				.index_sale {
					.free-WaterfallFlow {
						width: 100%;
						// column-count: 2;

						/*column-count 属性规定元素应该被分隔的列数：*/
						.flex-wrap {
							display: inline-block;
							width: 50%;
							// margin-right: 2%;
							text-align: left;
							vertical-align: top;
							margin-bottom: 24rpx;

							.page-column {
								width: 100%;

								image {
									width: 97%;
									margin: 0 auto;
									border-radius: 14rpx;
								}
							}
						}

						.flex-wrap:nth-child(2n) {
							text-align: right;
						}
					}
				}
			}
		}
	}

	.popup-content {
		width: 100%;
		height: 420px;
		background: #F5F5F5;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;

		.pc-header {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 40rpx;
			font-size: 36rpx;
			color: #333333;
		}

		.pc-title {
			padding: 24rpx 32rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.scroll-y {
			height: calc(420px - 79px - 80px);
		}

		.pc-footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			/* padding: 32rpx 0; */
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 79px;


			.pcf-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 32rpx;
				width: 100%;
			}

			.pcf-left {
				width: 50%;
				background-color: #FFFFFF;
				border: 2rpx solid #000000;
				font-size: 28rpx;
				color: #000;
				text-align: center;
				padding: 27rpx 0;
				border-radius: 100rpx 0 0 100rpx;
			}

			.pcf-right {
				width: 50%;
				background-color: #000;
				border: 2rpx solid #000000;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				padding: 27rpx 0;
				border-radius: 0 100rpx 100rpx 0;
			}
		}

		.coupon-list {
			padding: 0 32rpx 20rpx 32rpx;

			.cl-li {
				width: 100%;
				height: 180rpx;
				border-radius: 16rpx;
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				background-size: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.cl-li-left {
					width: 28%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;

					.cl-ll-price {
						font-size: 64rpx;
					}

					.cl-ll-price text {
						font-size: 28rpx;
					}

					.cl-ll-text {
						font-size: 28rpx;
					}
				}

				.cl-li-right {
					width: 67%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.cl-lr-title {
						color: #333333;
						font-size: 32rpx;
						font-weight: bold;
					}

					.cl-lr-desc {
						margin-top: 8rpx;
						color: #999999;
						font-size: 20rpx;
					}

					.cl-lr-btn {
						margin-right: 32rpx;
					}

					.cl-lr-content {
						width: calc(100% - 108rpx - 40rpx);
					}
				}
			}
		}
	}

	.coupon {
		position: fixed;
		bottom: 50rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;

		.coupon-img {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>